import Vue from "vue";
import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";


const style = {
  position: `fixed`,
  padding: `40px 100px`,
  inset: 0,
  overflow: "scroll",
  backgroundColor: `rgba(100, 100, 100, 0.3)`,
};
const XmlShow = {
  render() {
    return (
      <div class="xml-show" style={style} onClick={()=>this.$emit('close')}>
        <div class="wrap" style="background:white">
          <div ref="xmlRef" class="xml-contain"></div>
        </div>
      </div>
    );
  },
  name: "XmlShow",
  props: {
    url: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      osmd: null,
    };
  },
  mounted() {
    const render = async () => {
      const xmlShowEl = this.$refs.xmlRef;
      let osmd = this.osmd;
      // xmlMusic 文件展示器
      osmd = new OpenSheetMusicDisplay(xmlShowEl);
      await osmd.load(this.url);
      osmd.autoResizeEnabled = true;
      osmd.resizeHandlerAttached = true;

      await osmd.render();
    };
    render();
  },
};
export default function (xmlUrl) {
  const div = document.createElement("div");
  document.body.appendChild(div);


  const xml = new Vue({
    render: (h, ctx) => {
      return h(XmlShow, { props: { url: xmlUrl },on:{close:closeShow} });
    },
  }).$mount(div);
  function closeShow(){
    console.log('test remove')
    document.body.removeChild(xml.$el)
  }


}
